<template>
  <div class="container">
    <!-- 头部面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>内容</el-breadcrumb-item>
      <el-breadcrumb-item>添加内容</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-form
        :model="editContentForm"
        :rules="editContentFormRules"
        ref="editContentFormRef"
        label-width="100px"
        label-position="left"
      >
        <!-- 分类选项 -->
        <el-form-item label="所属分类" prop="cid">
          <el-cascader
            clearable
            v-model="editContentForm.cid"
            :options="cateList"
            :props="cateProps"
          ></el-cascader>
        </el-form-item>
        <!-- 标题 -->
        <el-form-item label="标题" prop="title">
          <el-input v-model="editContentForm.title" class="title"></el-input>
        </el-form-item>
        <!-- 图片上传 -->
        <el-form-item label="图片" prop="image">
          <el-upload
            name="image"
            :action="uploadURL"
            :headers="headerObj"
            :show-file-list="false"
            :on-success="handleSuccess"
          >
            <img
              v-if="editContentForm.image"
              :src="this.baseURL + 'upload/' + editContentForm.image"
              class="image"
            />
            <i v-else class="el-icon-plus image-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- 状态选择 -->
        <el-form-item label="状态" prop="status">
          <el-radio :label="1" v-model="editContentForm.status">默认</el-radio>
          <el-radio :label="2" v-model="editContentForm.status">推荐</el-radio>
        </el-form-item>
        <!-- 简介 -->
        <el-form-item label="简介" prop="content" class="editor">
          <quill-editor v-model="editContentForm.content"></quill-editor>
        </el-form-item>
        <!-- 底部按钮 -->
        <el-form-item>
          <el-button type="primary" @click="editContent">修改内容</el-button>
          <el-button @click="$router.push('/home/content')">返回列表</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ContentEdit',
  data() {
    return {
      cateList: [],
      // 添加内容表单数据对象
      editContentForm: {
        // 所属分类id
        cid: [],
        // 标题
        title: '',
        // 图片路径
        image: '',
        // 状态
        status: 1,
        // 内容
        content: ''
      },
      cateProps: {
        expandTrigger: 'hover',
        checkStrictly: true,
        children: 'children',
        value: 'id',
        label: 'name'
      },
      // 图片上传组件的URL地址
      uploadURL: this.baseURL + 'admin/upload',
      // 上传组件的请求头对象
      headerObj: {
        Token: window.sessionStorage.getItem('token')
      },
      // 添加内容表单规则对象
      editContentFormRules: {
        cid: [{ required: true, message: '请添加所属分类', trigger: 'change' }],
        title: [{ required: true, message: '请添加标题', trigger: 'blur' }],
        status: [{ required: true, message: '请添加状态', trigger: 'change' }],
        content: [{ required: true, message: '请添加简介', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getCateList()
    this.getContentById()
  },
  methods: {
    // 获取栏目列表
    async getCateList() {
      const { data: res } = await this.$http.get('/home/cate')
      this.cateList = res
    },
    // 根据id获取内容信息
    async getContentById() {
      const { id } = this.$route.params
      const { data: res } = await this.$http.get(`/admin/content/${id}`)
      if (res.status !== 200) return this.$message.error(res.msg)
      const { cid, title, image, status, content } = res.data
      this.editContentForm = { cid, title, image, status, content }
      // 跳转到内容列表
    },
    // 上传图片成功的事件处理函数
    handleSuccess(res) {
      this.editContentForm.image = res.name
    },
    // 修改内容的事件处理函数
    editContent() {
      this.$refs.editContentFormRef.validate(async valid => {
        if (!valid) return
        const { id } = this.$route.params
        const cid = this.editContentForm.cid[this.editContentForm.cid.length - 1]
        const { data: res } = await this.$http.put(`/admin/content/${id}`, {
          ...this.editContentForm,
          cid
        })
        if (res.status !== 200) return this.$message.error(res.msg)
        this.$message.success(res.msg)
        this.$router.push('/home/content')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  width: 50%;
}
.el-upload {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-upload .image-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;

  &:hover {
    border-color: #409eff;
  }
}
.image {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: cover;
}
.editor {
  max-width: 1000px;
}
/deep/ .ql-editor {
  height: 300px;
}
</style>
